forum

home / developersection / forums / how to use dropdownlist dynamically using ajax

Ask Question

How to Use DropDownList Dynamically Using Ajax

Anonymous User 1808 26-Nov-2015
I want to use DropDownList Dynamically Using Ajax in asp.net please help me
asp.net asp.net  ajax  jquery 
Updated on 26-Nov-2015
Anonymous User

Other

I am a content writter !

Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

26-Nov-2015

HTML dropdown list statically is very easy. It is done directly using a “select” tag , but when we have a requirement to add the data in HTML dropdownlist dynamically then the things change. At that time we must load the data from the database.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UsingAjaxDropDown.aspx.cs" Inherits="Forumasp.UsingAjaxDropDown" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="Scripts/jquery-2.1.4.js"></script>
</head>
<body>
     <script>
         $(function () {
             $.ajax({
                 type: "POST",                 
                 url: "UsingAjaxDropDown.aspx/GetData",
                 data: {},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 asnyc: false,                
                 success: function (data) {
                     var result = data['d'];
                     for (var i = 0; i < result.length; i++) {
                         console.log(result[i].Emp_Name);
                         var opt = new Option(result[i].Emp_Name);
                         $("#opemp").append(opt);
                     }
                 }
             })
         });
        </script>
    <form id="form1" runat="server">
    <div>
     <div>  
            <label>Select Employee :</label>  
        </div>  
        <div>  
            <select class="form-control" id="opemp" style="width:200px;">  
                <option selected="selected">Select</option>  
            </select>  
        </div>  
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Forumasp
{
    public partial class UsingAjaxDropDown : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        [WebMethod]
        public static List<Employee> GetData()
        {
            List<Employee> Emp = new List<Employee>();
            DataTable dt = new DataTable();
            string constr = ConfigurationManager.ConnectionStrings["forumConnectionString"].ToString(); // connection string
            SqlConnection con = new SqlConnection(constr);
            con.Open();
            SqlCommand com = new SqlCommand("select *from Employee", con); // table name 
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet ds = new DataSet();
            da.Fill(ds);
            dt = ds.Tables[0];
            Emp = (from DataRow row in dt.Rows
                   select new Employee
                   {
                       Emp_ID = Convert.ToInt32(row["Emp_ID"]),
                       Emp_Name = row["Emp_Name"].ToString(),
                       Emp_Sal =Convert.ToDecimal( row["Emp_Sal"])
                   }).ToList();
            return Emp;
        }
    }

    public class Employee
    {
        public int Emp_ID { get; set; }
        public string Emp_Name { get; set; }
        public decimal Emp_Sal { get; set; }
    }
}

 How to Use DropDownList Dynamically Using Ajax

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy